<template>
	<div id="monitor-container" >
		<router-view v-slot="{ Component }">
			<transition enter-active-class="enterAnimation" leave-active-class="leaveAnimation">
				<keep-alive include="desktop,Desktop" :max="20">
					<component :is="Component" />
				</keep-alive>
			</transition>
		</router-view>
	</div>
</template>

<script setup>
	import { onMounted,onUnmounted } from "vue";
	import coreStore from './stores/core.js';
	const $coreStore = coreStore();
	
	onMounted(()=> {
		console.log('-> monitor init');
		window.addEventListener('mousedown', onMousedown);
	})
	
	onUnmounted(()=>{
		window.removeEventListener('mousedown', onMousedown);
	})
	
	const onMousedown = function() {
		$coreStore.closeContextMenu();
	}
</script>

<style lang="less" scoped>
	.leaveAnimation {
	  animation: slideOutLeft 0.5s;
	}
	.enterAnimation {
	  animation: fadeIn 0.5s;
	}
</style>
